<template>
	<view class="c-swiper" :style="containerStyle">
		<swiper
			class="swiper-container"
			:indicator-dots="false"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration"
			:circular="circular"
			:vertical="vertical"
			:current="idx"
			@change="handleChange"
		>
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<!-- 图片资源 -->
				<!-- <c-image class="thumb" :src="getSource(item)" :mode="mode" @click="handleClick(item)"></c-image> -->
				<image class="thumb" :src="getSource(item)" :mode="mode" @click="handleClick(item)"></image>
			</swiper-item>
		</swiper>

		<view class="indicator" v-if="indicator && list.length > 1">
			<view class="indicator-dots" v-if="indicatorMode == 'dots'">
				<text
					class="dots-item"
					v-for="(item, index) in list"
					:key="index"
					:style="{
						backgroundColor: index == idx ? indicatorActiveColor : indicatorColor
					}"
				></text>
			</view>
			<view class="indicator-bar" v-if="indicatorMode == 'bar'">
				<text
					class="dots-item"
					v-for="(item, index) in list"
					:key="index"
					:style="{
						backgroundColor: index == idx ? indicatorActiveColor : indicatorColor,
						width: index == idx ? '48rpx' : '24rpx'
					}"
				></text>
			</view>
			
			<view class="indicator-num" v-if="indicatorMode == 'num'">
				<text class="current">2</text>
				<text class="line">/</text>
				<text class="">5</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	/**
	 *轮播图组件
	 * @description c-swiper 通用轮播图组件
	 * @property {Array} list 轮播图数据源
	 * @property {String} keyName 数据映射的键值
	 * @property {String|Number} width 轮播图宽度
	 * @property {String|Number} height 轮播图高度
	 * @property {String|Number} radius 轮播图圆角大小
	 * @property {String} mode=[scaleToFill|aspectFit|aspectFill|widthFix|heightFix] 图片裁剪方式
	 * 	@value scaleToFill  不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
	 * 	@value aspectFit  保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
	 * 	@value aspectFill  保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
	 * 	@value widthFix  宽度不变，高度自动变化，保持原图宽高比不变
	 * 	@value heightFix 高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
	 * @property {Number} current 当前图片索引
	 * @property {Boolean} autoplay 是否自动轮播
	 * @property {Boolean} circular 是否采用衔接滑动，即播放到末尾后重新回到开头
	 * @property {Boolean} circular 是否采用衔接滑动，即播放到末尾后重新回到开头
	 * @property {Number} vertical 滑动方向是否为纵向
	 * @property {Number} duration 滑动动画时长
	 * @property {Boolean} indicator 是否显示指示操作栏
	 * @property {String} indicatorMode=[dots|bar] 指示操类型
	 * @property {String} indicatorColor 指示操底色
	 * @property {String} indicatorActiveColor 当前指示器的颜色
	 * @event {Function} change 切换时触发
	 * @event {Function} click 点击图片触发
	 * @example <c-swiper :list="[]"></c-swiper>
	 */
	import { computed, ref, watchEffect } from 'vue';
	import _props from './props.js';
	import { handleUnit } from '@/common/tools/index.js';

	const props = defineProps(_props);
	const emits = defineEmits(['change', 'click']);

	let idx = ref(0);

	watchEffect(() => {
		idx.value = props.current;
	});

	const containerStyle = computed(() => ({
		width: handleUnit(props.width),
		height: handleUnit(props.height),
		borderRadius: handleUnit(props.radius)
	}));

	const getSource = (item) => {
		if (!item) return;
		const type = typeof item;
		if (type === 'string') {
			return item;
		} else {
			return item[props.keyName];
		}
	};

	const handleChange = (e) => {
		const index = e.detail.current;
		idx.value = index;
		emits('change', index);
	};

	const handleClick = (item) => {
		emits('click', item);
	};
</script>

<style lang="scss">
	.c-swiper {
		position: relative;
		overflow: hidden;
		width: 100%;
		// height: 350rpx;
		background-color: $bg-inverse-color;
		border-radius: $radius-8;
		.swiper-container,
		.swiper-item,
		.thumb {
			width: 100%;
			height: 100%;
		}
		.indicator {
			position: absolute;
			@include f-center($inline: inline-flex);
			bottom: $margin-16;
			left: 50%;
			transform: translateX(-50%);
			.indicator-dots {
				@include f-center($inline: inline-flex);
				.dots-item {
					width: 12rpx;
					height: 12rpx;
					margin: 0 $margin-8;
					background-color: $bg-color;
					border-radius: $radius-circle;
					transition: all 0.2s;
				}
			}
			.indicator-bar {
				@include f-center($inline: inline-flex);
				.dots-item {
					width: 24rpx;
					height: 5px;
					margin: 0 $margin-8;
					background-color: $bg-color;
					border-radius: $radius-half;
					transition: all 0.2s;
				}
			}
		}
	}
</style>
